<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
      <form>
              账号：<input type="text" name="username" id="username"><span id="username_msg"></span><br>
              密码：<input type="password" name="password" id="password"><br>
              <input type="submit" value="注册">

      </form>
</body>
</html>
<script>
    //1 给用户名输入框添加失去焦点事件
    $("#username").blur(function () {
        //2 获取用户名输入框内容
        let username= $(this).val();
        //3 在失去焦点事件中，通过ajax向服务器发送请求，请求参数是username
        /* 相对路径写法：
             当前html页面的访问路径：http://localhost:8080/ajax_01/ajax.html
             要访问的Servlet路径：  http://localhost:8080/ajax_01/ajaxServlet
        */
        $.ajax({
            url:"ajaxServlet",   //请求路径
            data:"username="+username,  //请求参数
            type:"post",  //请求方式
            dataType:"text",  //期望响应回来的数据类型
            success:function (msg) {  //响应成功要执行的函数，msg表示响应回来的数据
                //console.log(msg);
                //4 处理结果，将结果展示在username_msg标签中
                $("#username_msg").html(msg);
            },

        });
    });
</script>